<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>终端管理</span>
      <div>
        <el-button type="primary" @click="addterminal">添加终端</el-button>
        <el-button icon="el-icon-refresh"></el-button>
      </div>
    </div>
    <div class="container">
      <div class="screeningBox">
        <div class="leftBox">
          <!-- <div class="leftitem">
            <div class="block">
              <el-date-picker
                v-model="conditions.stardate"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="提交起始时间"
              ></el-date-picker>
              <el-date-picker
                v-model="conditions.enddate"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="提交结束时间"
              ></el-date-picker>
            </div>
          </div>-->
          <div class="leftitem">
            <el-select class="servicelevel" v-model="conditions.servicelevel" placeholder="终端类型">
              <el-option keys="1" label="静态码台卡" :value='3'></el-option>
              <el-option keys="2" label="智能POS" :value="1"></el-option>
              <el-option keys="2" label="收银插件" :value="2"></el-option>
              <el-option keys="2" label="收银盒子" :value="4"></el-option>
              <el-option keys="2" label="刷脸设备" :value="8"></el-option>
              <el-option keys="2" label="接口" :value="5"></el-option>
            </el-select>
            <el-select class="servicelevel" v-model="conditions.state" placeholder="激活状态">
              <el-option keys="1" label="已激活" value="1"></el-option>
              <el-option keys="2" label="未激活" value="0"></el-option>
              <el-option keys="2" label="已解绑" value="2"></el-option>
            </el-select>
            <el-input
              class="merchants"
              @keyup.enter.native="soso"
              v-model.trim="conditions.terminalNo"
              placeholder="终端号"
            ></el-input>
          </div>
          <div class="leftitem">
            <el-input
              class="merchants wid40"
              @keyup.enter.native="soso"
              v-model.trim="conditions.qrCode"
              placeholder="二维码编号"
            ></el-input>
          </div>
          <div class="leftitem">
            <el-input
              class="merchants wid40"
              @keyup.enter.native="soso"
              v-model.trim="conditions.terminalMac"
              placeholder="机器号"
            ></el-input>
          </div>
        </div>
        <div class="rightBox">
          <div class="rightitem">
            <el-input
              class="merchants"
              @keyup.enter.native="soso"
              v-model.trim="conditions.merchantsno"
              placeholder="商户号/商户名/商户简称"
            ></el-input>
          </div>
          <div class="rightitem">
            <el-input
              class="merchants"
              @keyup.enter.native="soso"
              v-model.trim="conditions.shopno"
              placeholder="门店号/门店名"
            ></el-input>
          </div>
          <div class="rightitem">
            <el-button icon="el-icon-search" type="primary" @click="soso">搜索</el-button>
            <el-button icon="el-icon-refresh" type="primary" @click="reset">重置</el-button>
          </div>
        </div>
      </div>

      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="merchantarr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
          v-loading = "loading"
        >
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column align="center" type="index" label="序号"></el-table-column>
          <el-table-column prop="terminalNo"  align="center" label="终端号"></el-table-column>
          <el-table-column prop="qrcodeno"  align="center" label="二维码编号"></el-table-column>
          <el-table-column prop="merchantName" width="260" align="center" label="所属商户/门店">
            <template slot-scope="scope">
              <div>{{scope.row.merchantName}}<span v-if="scope.row.shopName">/</span>{{scope.row.shopName}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="merchantShortName" align="center" label="商户简称"></el-table-column>
          <el-table-column prop="typeName" align="center" label="终端类型" width="115">
            <template slot-scope="scope">
              <span>{{scope.row.typeName}}</span>
              <img class="code_img" src="../../assets/img/codeicon.png" alt="" title="预览" v-if="scope.row.typeName == '静态码台卡' && scope.row.activationStatus != 2" @click="code_ma(scope.row)">
            </template>
          </el-table-column>
          <el-table-column prop="createTime" align="center" label="时间"></el-table-column>
          <el-table-column prop="activationStatusName" align="center" width="90" label="状态"></el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="140">
            <template slot-scope="scope">
              <el-button type="text" size="small" v-if="(userinfo.rolesId==1 || userinfo.rolesId==8) && ((scope.row.type == 8 && scope.row.terminalBrand == '新蜻蜓') || (scope.row.type == 4 && scope.row.terminalBrand == '如意'))" @click="threebindingbtn(scope.row)">三绑定</el-button>
              <el-button type="text" size="small" v-if=" scope.row.type == 3 && scope.row.activationStatus == 2" @click="terminalupdate(scope.row)">绑定</el-button>
              <el-button
                type="text"
                size="small"
                @click="terminalupdate(scope.row)"
                v-if="scope.row.activationStatus == 1 || scope.row.activationStatus == 0"
              >编辑</el-button>
              <el-button type="text" size="small" @click="terminaldelete(scope.row.id)">删除</el-button>
              <div  style="display:inline-block;margin-left:6px;" v-if="scope.row.type == 3">
                   <el-button type="text" size="small" v-if="scope.row.activationStatus == 1 || scope.row.activationStatus == 0" @click="unbundle(scope.row.id)">解绑</el-button>
              </div>
              <!-- <el-button type="text" size="small">预览</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="combined"
          ></el-pagination>
        </div>
      </div>
      <br>
      <br>
      <!-- 添加终端 -->
      <el-dialog v-dialogDrag title="添加终端" :visible.sync="eqma" width="50%" :close-on-click-modal="false">
        <el-form
          :model="tarminal"
          status-icon
          ref="tarminal"
          label-width="100px"
          class="demo-dynamic"
        >
          <el-form-item label="所有商户">
            <!-- <el-autocomplete
              v-model="tarminal.marid"
              :fetch-suggestions="allmerchants"
              @select="marid"
            ></el-autocomplete> -->
            <el-autocomplete v-model.trim="tarminal.marid" :fetch-suggestions="merchantslist" :debounce="300" placeholder="商户名" @select="marid"></el-autocomplete>
          </el-form-item>
          <el-form-item label="所有门店">
            <el-autocomplete
              v-model.trim="tarminal.shopName"
              :fetch-suggestions="allshops"
              @select="shopid"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="应用类型">
            <el-select class="servicelevels" v-model="tarminal.type" placeholder="请选择" @change="type">
              <el-option keys="1" label="静态码台卡" value="3"></el-option>
              <el-option keys="2" label="智能POS" value="1"></el-option>
              <el-option keys="2" label="收银插件" value="2"></el-option>
              <el-option keys="2" label="收银盒子" value="4"></el-option>
              <el-option keys="2" label="接口" value="5"></el-option>
              <el-option keys="2" label="刷脸设备" value="8"></el-option>
            </el-select>
          </el-form-item>
          <div v-if="this.tarminal.type == 1 || this.tarminal.type == 4 ||  this.tarminal.type == 2 ||  this.tarminal.type == 8" >
            <el-form-item label="品牌">
              <el-select class="servicelevels" v-model="tarminal.terminalBrand" placeholder="请选择" @change="terminalBrand">
                <el-option v-for="(item,index) in  terminalBrandlist" :key="index" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="this.tarminal.type != 2"  label="机器型号">
              <el-select class="servicelevels" v-model="tarminal.terminalModel" placeholder="请选择">
                <el-option v-for="(item,index) in  modellist" :key="index" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="机器号">
              <el-input type="text" v-model.trim="tarminal.terminalMac" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item v-if="this.tarminal.type == 1 || this.tarminal.type == 4"  label="银联终端号">
              <el-input type="text" v-model.trim="tarminal.terminalNoUni" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item v-if="this.tarminal.type == 1 || this.tarminal.type == 4"  label="二维码编号">
              <el-input type="text" v-model.trim="tarminal.qrcodeno" autocomplete="off"></el-input>
            </el-form-item>
          </div>
          <div v-if="this.tarminal.type == 3">
            <el-form-item label="二维码编号">
              <el-input type="text" v-model.trim="tarminal.qrcodeno" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="支付显示名称">
              <el-input type="text" v-model.trim="tarminal.payName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="logo">
              <el-upload
                list-type="picture-card"
                :action="urls"
                :headers="token"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"

              >
                <img
                  style="width:100%;height:100%"
                  v-if="tarminal.payLogo"
                  :src="tarminal.payLogo"
                  class="avatar"
                >
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
          <!-- <div v-if="this.tarminal.type == 1">
            <el-form-item  label="外部终端号">
              <el-input type="text" v-model.trim="tarminal.alias" autocomplete="off"></el-input>
            </el-form-item>
          </div> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="eqma = false">取消</el-button>
          <el-button type="primary" @click="terminalsave">确定</el-button>
        </span>
      </el-dialog>
       <!-- 修改终端 -->
      <el-dialog v-dialogDrag title="修改终端" :visible.sync="amend" width="50%" :close-on-click-modal="false">
        <el-form
          :model="tarminalamend"
          status-icon
          ref="tarminalamend"
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item label="所有商户">
            <!-- <el-autocomplete
              v-model="tarminalamend.marid"
              :fetch-suggestions="allmerchants"
              @select="marid"
              disabled
            ></el-autocomplete> -->
             <el-autocomplete disabled v-model="tarminalamend.marid" :fetch-suggestions="merchantslist" :debounce="300" placeholder="商户名" @select="marid"></el-autocomplete>
          </el-form-item>
          <el-form-item label="所有门店">
            <el-autocomplete
              v-model="tarminalamend.shopnames"
              :fetch-suggestions="allshops"
              @select="shopid"
              disabled
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="应用类型">
            <el-select class="servicelevels" v-model="tarminalamend.type" placeholder="请选择" disabled>
              <el-option keys="1" label="静态码台卡" :value="3"></el-option>
              <el-option keys="2" label="智能POS" :value="1"></el-option>
              <el-option keys="2" label="收银插件" :value="2"></el-option>
              <el-option keys="2" label="收银盒子" :value="4"></el-option>
              <el-option keys="2" label="接口" :value="5"></el-option>
              <el-option keys="2" label="刷脸设备" :value="8"></el-option>
            </el-select>
          </el-form-item>
          <div v-if="this.tarminalamend.type == 1 || this.tarminalamend.type == 4 || this.tarminalamend.type == 2 ||  this.tarminalamend.type == 8">
            <el-form-item label="品牌">
              <el-input type="text" :disabled="tarminalamend.type == 1 || tarminalamend.type == 4 || this.tarminalamend.type == 2 || this.tarminalamend.type == 8" v-model="tarminalamend.terminalBrand" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item v-if="this.tarminalamend.type != 2" label="机器型号">
              <el-input type="text" :disabled="tarminalamend.type == 1 || tarminalamend.type == 4 || this.tarminalamend.type == 2 || this.tarminalamend.type == 8" v-model="tarminalamend.terminalModel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="机器号">
              <el-input type="text" :disabled="tarminalamend.type == 1 || tarminalamend.type == 4 || this.tarminalamend.type == 2 || this.tarminalamend.type == 8" v-model="tarminalamend.terminalMac" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item v-if="this.tarminalamend.type == 1 || this.tarminalamend.type == 4" label="银联终端号">
              <el-input type="text" v-model.trim="tarminalamend.terminalNoUni" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item v-if="this.tarminalamend.type == 1 || this.tarminalamend.type == 4" label="二维码编号">
              <el-input type="text" v-model.trim="tarminalamend.qrcodeno" autocomplete="off"></el-input>
            </el-form-item>
          </div>
          <div v-if="this.tarminalamend.type == 3">
            <el-form-item label="二维码编号">
              <el-input type="text" v-model="tarminalamend.qrcodeno" autocomplete="off" :disabled="tarminalamend.activationStatus == 2?false:true"></el-input>
            </el-form-item>
            <el-form-item label="支付显示名称">
              <el-input type="text" v-model="tarminalamend.payName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item class="photo" label="logo">
              <el-upload
                list-type="picture-card"
                :action="urls"
                :headers="token"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img
                  style="width:100%;height:100%"
                  v-if="tarminalamend.payLogo"
                  :src="tarminalamend.payLogo"
                  class="avatar"
                >
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
          <!-- <div v-if="this.tarminal.type == 1">
            <el-form-item  label="外部终端号">
              <el-input type="text" v-model.trim="tarminal.alias" autocomplete="off"></el-input>
            </el-form-item>
          </div> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="amend = false">取消</el-button>
          <el-button type="primary" @click="terminalupdateok">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="" :visible.sync="dialogTableVisible" width="500px" :close-on-click-modal='false'>
        <el-tabs v-model="activeName" :stretch="true"  @tab-click="handleClick">
          <el-tab-pane label="公众号台卡" name="first">
            <div class="gzh_ka">
              <div class="box_warp">
                <div class="box" ref="box">
                  <img v-if="oemFlag == 1" :src="oeminfo.cardImage" alt="">
                  <img v-else src="../../assets/img/taika.png" alt="">
                  <div id="qrcode1"></div>
                </div>
              </div>
              <el-button class="ka_btn" type="primary" plain @click="download_gzh">下载</el-button>
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="小程序台卡" name="second">
            <div class="xcx_ka">
              <div class="box_xcxp">
                <div class="box1" ref="box1">
                  <img v-if="oemFlag == 1" :src="oeminfo.cardImage" alt="">
                  <img v-else src="../../assets/img/taika.png" alt="">
                  <div id="qrcode2"></div>
                </div>
              </div>
              <el-button class="ka_btn" type="primary" plain @click="download_xcx">下载</el-button>
            </div>
          </el-tab-pane> -->
        </el-tabs>
      </el-dialog>
      <!-- 三绑定 -->
      <el-dialog v-dialogDrag title="IOT设备三绑定" :visible.sync="threebinding" width="50%" :close-on-click-modal="false">
        <el-form :model="bindinginfo" status-icon ref="tarminal" label-width="150px" class="demo-dynamic">
          <el-form-item required label="商户支付宝PID">
            <el-input type="text" v-model.trim="bindinginfo.aliPid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item v-if="aliMerchantType == 'indirect'" required label="支付宝间联smid">
            <el-input type="text" v-model.trim="bindinginfo.aliSmid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item v-if="aliMerchantType == 'indirect'" label="支付宝登录账号">
            <el-input type="text" v-model.trim="bindinginfo.alipayAccount" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item  required label="支付宝门店ID">
            <el-input type="text" v-model.trim="bindinginfo.aliShopId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item  required label="支付宝设备ID">
            <el-input type="text" v-model.trim="bindinginfo.aliDeviceId" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <!-- <div v-if="aliMerchantType == 'indirect'">
          <div class="btnbox"><el-button class="btn blue" @click="operationapply()" type="primary">代运营申请</el-button></div>
          <div class="btnbox"><el-button class="btn" type="primary">同步运营操作结果</el-button></div>
        </div> -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="threebinding = false">取消</el-button>
          <el-button type="primary" @click="bingdingok()">绑定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getservice,
  terminallist,
  merchantlist,
  merchantall,
  shopall,
  terminalsave,
  terminaldelete,
  terminalupdate,
  terminalrelease,
  get3Bind,
  config3Bind,
  operationresult,
  operationapply
} from "@/api/api";
import '../../assets/js/jquery-qrcode';
import html2canvas from 'html2canvas';
import { qrcanvas } from 'qrcanvas';
export default {
  name: "item-one",
  data: function() {
    return {
      userinfo:{},
      threebinding:false,
      activeName: 'first',
      token: { token: sessionStorage.getItem("token") },
      tableData: [],
      cur_page: 1,
      cur_size: 10,
      multipleSelection: [],
      amend: false,
      servicearr: [],
      merchantarr: [],
      combined: 10,
      pageCount: "",
      eqma: false,
      loading: true,
      imageUrl: "",
      terminalupdateid:"",
      terminalBrandlist:[],
      tarminal: {
        payLogo: "",
        shopName:""
      },
      tarminalamend:{
        payLogo: ""
      },
      allmerchant: [],
      allshop: [],
      poslist:[
        // {name:'华智融'},
        {name:'联迪'}
      ],
      boxlist:[
        {name:'意锐'},
        {name:'新大陆'},
        {name:'如意'},
      ],
      liandi:[
        {name:'联迪A8'},
        {name:'联迪E820mis'},
      ],
      pluginlist:[
        {name:'意锐RC661'}
      ],
      facelist:[
        {name:'青蛙'},
        {name:'蜻蜓'},
        {name:'新蜻蜓'}
      ],
      qingwa:[
        {name:'TZH-L1'}
      ],
      qingting:[
        {name:'T3B00'}
      ],
      xinqingting:[
        {name:'F4A'}],
      yirui:[
        {name:'RC661'}
      ],
      huazhirong:[
        {name:'9210'}
      ],
      xindalu:[
        {name:'ME50C'}
      ],
      ruyi:[
        {name:'AMX'}
      ],
      modellist:[],
      conditions: {
        servicelevel: "",
        merchantsno: "",
        shopno: "",
        qrCode: "",
        state: "",
        terminalNo:"",
        terminalMac:""
      },
      dialogTableVisible: false,
      qrcodeno_tk:'',
      terminalURL:'',
      gzh_url:  this.$store.state.url +'/wallet/qrpay/',
      xcx_url: this.$store.state.url +'/minipay/',
      oeminfo:'',
      oemFlag:'',
      urls: this.$store.state.urlexcel +'/product/v31/api/merchant/uploadfile/upload',
      bindinginfo:{},
      aliMerchantType:'',
      bingding3id:'',
      operationapplybtn:true,
      operationresultbtn:true,
      batchNo:''
    };
  },
  created() {
    this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.$store.dispatch("getNewNum", 6);
    // console.log(this.$store.state.changableNum);
    // console.log(this.$store.state.showFooter);
    // console.log(this.$store.state.logininfo);
    this.merchantlist();
    this.oeminfo = JSON.parse(sessionStorage.getItem('oeminfo'))
    this.oemFlag = sessionStorage.getItem('oemFlag')
  },
  methods: {
    handleAvatarSuccess(res, file) {
      // this.tarminal.$set('payLogo', res.data.filePath)
      
       if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.tarminal.payLogo = res.data.filePath;
        this.tarminalamend.payLogo = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
    //修改thead 背景色
     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
      }
    },
    // 刷新
    refresh() {
      this.$router.replace({
        path: "/refresh",
        query: {
          t: Date.now()
        }
      });
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.merchantlist();
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 分页数量
    sizechange(val) {
      this.cur_size = val;
      this.merchantlist();

      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    //多选框
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    //  重置
    reset() {
      this.conditions = {
        servicelevel : "",
        merchantsno : "",
        shopno : "",
        qrCode : "",
        state : "",
        terminalNo : "",
        terminalMac : ""
      }
    },
    // 搜索
    soso() {
      this.loading = true
      this.cur_page = 1
      this.merchantlist();
    },
    // 打开添加中终端Box
    addterminal() {
      this.eqma = true;
      this.tarminal ={
        payLogo: "",
        shopName:""
      }
    },
    // 终端列表
    merchantlist() {
      // console.log(this.conditions)
      terminallist({
        page: this.cur_page,
        size: this.cur_size,
        type: this.conditions.servicelevel,
        activationStatus: this.conditions.state,
        qrcodeno: this.conditions.qrCode,
        keywords: this.conditions.merchantsno,
        searchwords: this.conditions.shopno,
        terminalNo: this.conditions.terminalNo,
        terminalMac: this.conditions.terminalMac
      }).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.merchantarr = res.data;
          this.combined = res.pageInfo.recordCount;
          this.pageCount = res.pageInfo.pageCount;
          this.loading = false
        }
      });
    },
 
    marid(item) {
      this.tarminal.merchantId = item.id;
      this.tarminal.shopName = '';
      this.shopall();
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
          -1
        );
      };
    },
   // 获取商户列表初始化
    merchantslist(queryString, cb) {

      let sosolist = {};
      sosolist = {
          page: 1,
          size: 20,
          merchantName: this.tarminal.marid,
        };
      merchantlist(sosolist).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
           this.merchantarrlist = []
          for(var i=0;i<res.data.length;i++){
            this.merchantarrlist.push({'value':res.data[i].merchantName,'id':res.data[i].id})
          }
           let results = queryString
            ? this.merchantarrlist.filter(this.createFilter(queryString))
            : this.merchantarrlist;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },
    // 全部门店
    allshops(queryString, cb) {
      let allshope = this.allshop;
      let results = queryString
        ? allshope.filter(this.createFilter(queryString))
        : allshope;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    shopid(item) {
      this.tarminal.shopCode = item.code;
      this.tarminal.shopName = item.value;
      this.tarminal.shopId = item.id;
    },
    // 通过商户获取门店
    shopall() {
      this.allshop = []
      shopall({
        merchantId: this.tarminal.merchantId
      }).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          for (var i = 0; i < res.data.rows.length; i++) {
            this.allshop.push({
              value: res.data.rows[i].shopName,
              id: res.data.rows[i].id,
              code: res.data.rows[i].shopNo
            });
          }
        }
      });
    },
    // 添加终端
    terminalsave() {
      // console.log(this.tarminal)
      terminalsave(this.tarminal).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          this.eqma = false;
          this.tarminal = { payLogo: "" };
          this.merchantlist();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 删除终端
    terminaldelete(id) {
      this.$confirm("是否确定删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          terminaldelete({}, id).then(res => {
            // console.log(res);
            if (res.code == 405) {
              sessionStorage.removeItem("token");
              this.$router.push("/login");
            } else if (res.code == 200) {
              this.$message({
                message: "已删除",
                type: "success"
              });
              this.merchantlist();
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 修改终端
    terminalupdate(val){
      this.terminalupdateid = val.id
      this.amend =true;
      this.tarminalamend = {
        type: val.type,
        terminalBrand: val.terminalBrand,
        terminalModel: val.terminalModel,
        terminalMac: val.terminalMac,
        terminalNoUni: val.terminalNoUni,
        qrcodeno: val.qrcodeno,
        payName: val.payName,
        payLogo: val.payLogo,
        marid: val.merchantName,
        shopnames: val.shopName,
        shopName:val.shopName,
        activationStatus: val.activationStatus,
        shopId:val.shopId,
      }
    },
    // 修改终端ok
    terminalupdateok(){
       terminalupdate(this.tarminalamend,this.terminalupdateid).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.amend = false;
          this.merchantlist();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 解绑
    unbundle(id){
      this.$confirm("是否确定解绑？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
         terminalrelease({},id).then(res => {
            // console.log(res);
            if (res.code == 405) {
              sessionStorage. removeItem("token");
              this.$router.push("/login");
            } else if(res.code == 200){
              this.$message({
                message: "解绑成功",
                type: "success"
              });
              this.merchantlist()
            }else{
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    //显示预览弹框
    code_ma(v){
      this.dialogTableVisible = true
      this.activeName ='first'
      this.qrcodeno_tk = v.qrcodeno
      var nog = "Nog:"+ this.qrcodeno_tk
      // var nox = "Nox:"+ this.terminalNo
      this.qrCdoe(nog,this.gzh_url)
      // this.qrCdoe2(nox,this.xcx_url)
    },
    handleClick(tab, event) {
      if(tab.name == "first"){
        var nog = "Nog:"+ this.qrcodeno_tk
        this.qrCdoe(nog,this.gzh_url)
      }else 
      if(tab.name == 'second'){
        var nox = "Nox:"+ this.qrcodeno_tk
        this.qrCdoe2(nox,this.xcx_url)
      }
    },
    qrCdoe(v,url){
      var label = v
      var url = url
      $('#qrcode1').html("");
      this.$nextTick(()=> {
        var qrcode = $('#qrcode1').qrcode({
            render: "canvas", //也可以替换为table
            size: 175,
            text: url + this.qrcodeno_tk,
            label: label,
            minVersion: 1,       // version range somewhere in 1 .. 40
            maxVersion: 40,
            ecLevel: 'L',        //识别度  'L', 'M', 'Q' or 'H'
            radius: 0.1,         // 0.0 .. 0.5
            quiet: 3,            //边距
            mode: 2,
            fill: '#000',        //二维码颜色 
            background: '#ffff',    //背景色  
            mSize: 0.05,          //图片大小
            mPosX: 0.5,
            mPosY: 0.99,
            fontname: 'sans',
        })
      })
    },
    qrCdoe2(v,url){
      var label = v
      var url = url
      $('#qrcode2').html("");
       var qrcode1 = $('#qrcode2').qrcode({
            render: "canvas", //也可以替换为table
            size: 175,
            text: url + this.qrcodeno_tk,
            label: label,
            minVersion: 1,       // version range somewhere in 1 .. 40
            maxVersion: 40,
            ecLevel: 'L',        //识别度  'L', 'M', 'Q' or 'H'
            radius: 0.1,         // 0.0 .. 0.5
            quiet: 3,            //边距
            mode: 2,
            fill: '#000',        //二维码颜色 
            background: '#ffff',    //背景色  
            mSize: 0.05,          //图片大小
            mPosX: 0.5,
            mPosY: 0.99,
            fontname: 'sans',
        })
    },
    //下载
    download_gzh(){
      this.htmlCanvas(this.$refs.box,'公众号台卡')
    },
    download_xcx(){
      this.htmlCanvas(this.$refs.box1,'小程序台卡')
    },
    htmlCanvas(dom,t){
      let that = this
      let a = document.createElement('a');
      const loading = this.$loading({
        lock: true,
        text: '正在下载',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      var box = dom
      var title = t
        // {width:331,height:451,x:795,scale:2}
      html2canvas(box,{width:332,height:453,scale:2}).then(function(canvas) {
          // console.log(canvas) //生成canvas画布
          // console.log(canvas.toDataURL()) //将canvas转为base64图片
          let dom = document.body.appendChild(canvas);
          dom.style.display = 'none';
          a.style.display = 'none';
          document.body.removeChild(dom);
          let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
          a.setAttribute('href', URL.createObjectURL(blob));
          //这块是保存图片操作  可以设置保存的图片的信息
          a.setAttribute('download', title +'['+that.qrcodeno_tk +']'+ '.png');
          document.body.appendChild(a);
          a.click();
          URL.revokeObjectURL(blob);
          document.body.removeChild(a);
          loading.close();
      });
    },
    //图片转换格式的方法 
    dataURLToBlob(dataurl) {
        let arr = dataurl.split(',');
        let mime = arr[0].match(/:(.*?);/)[1];
        let bstr = atob(arr[1]);
        let n = bstr.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    },
    // 应用类型
    type(val){
       this.$set(this.tarminal,'terminalBrand','')
      if(val == 1){
        this.terminalBrandlist = this.poslist
      }else if(val == 2){
        this.terminalBrandlist = this.pluginlist
      }else if(val == 4){
        this.terminalBrandlist = this.boxlist
      }else if(val == 8){
        this.terminalBrandlist = this.facelist
      }
    },
    // 机器型号
    terminalBrand(val){
       this.$set(this.tarminal,'terminalModel','')
      switch(val){
        case '华智融':
           this.modellist = this.huazhirong;
           break
        case '联迪':
          this.modellist = this.liandi
          break
        case '意锐':
          this.modellist = this.yirui
          break
        case '新大陆':
          this.modellist = this.xindalu
          break
        case '如意':
          this.modellist = this.ruyi
          break
        case '青蛙':
          this.modellist = this.qingwa
          break
        case '蜻蜓':
          this.modellist = this.qingting
          break
        case '新蜻蜓':
          this.modellist = this.xinqingting
          break
      }
    },
    // 三绑定
    threebindingbtn(val){
      this.threebinding = true
      this.bingding3id = val.id
      get3Bind({},val.id).then(res => {
        console.log(res)
        if(res.code == 200){
          this.bindinginfo = res.data
          this.aliMerchantType = res.data.aliMerchantType
          this.batchNo = res.data.aliBatchNo
        }else{
          this.bindinginfo = res.data
          this.aliMerchantType = res.data.aliMerchantType
          this.batchNo = res.data.aliBatchNo
          this.$message.error(res.message);
        }
      })
    },
    // 确定绑定
    bingdingok(){
      config3Bind({
        id: this.bingding3id,
        ...this.bindinginfo
      }).then(res => {
        if(res.code == 200){
          this.$message({
            message: "绑定成功",
            type: "success"
          });
           this.threebinding = false
        }else{
          this.$message.error(res.message);
        }
      })
    },
    // 代运营申请
    operationapply(){
      let that = this
      if(this.operationapplybtn){
        this.operationapplybtn = false
        const loading = this.$loading({
        lock: true,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      operationapply({
        merchantChannelId: this.bindinginfo.merchantChannelId,
        alipayAccount: this.bindinginfo.alipayAccount
        }).then(res =>{
          if(res.code ==200){
            this.batchNo = this.data
            this.$message({
              message: "代申请成功",
              type: "success"
            });
            loading.close();
            setTimeout(function(){
              that.operationapplybtn = true
            },10000)
          }else{
            this.$message.error(res.message);
            loading.close();
            that.operationapplybtn = true
          }
        })
      }else{
        this.$message({
          message: '您操作过于频繁,请稍后再试',
          type: 'warning'
        });
      }
      
    },
    // 同步运营操作结果
    operationresult(){
      if(this.operationresultbtn){
        operationresult({
          merchantChannelId: this.bindinginfo.merchantChannelId,
          batchNo: this.batchNo
        }).then(res => {
          console.log(res)
        })
      }else{
        this.$message({
          message: '您操作过于频繁,请稍后再试',
          type: 'warning'
        });
      }
     
    }
  }
};
</script>
<style scoped lang='less'>
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicelevel {
  width: 20%;
}
.width20 {
  width: 20%;
}
.red {
  color: #f9607d;
}
.blue {
  color: #01aaef;
}
.stitle {
  padding: 5px 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    margin-left: 10px;
    margin-right: 5px;
  }
  .swarning {
    color: red;
  }
  .warning {
    color: #f9607d;
  }
}
 .el-upload{
    height: 250px  !important;
  }
  .el-autocomplete{
    width: 95%;
  }
  .servicelevels{
    width: 95%;
  }
  .code_img{
    float: right;
    width: 20px;
    height: 20px;
    // margin-left: 10px;
  }
  .gzh_ka{
    width: 400px;
    height: 550px;
    // background-color: pink;
    margin: 0 auto;
    position: relative;
    .box_warp{
      width: 331px;
      height: 451px;
      position: absolute;
      top: 30px;
      left: 50%;
      -ms-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    .box{
      width: 100%;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .xcx_ka{
    width: 400px;
    height: 550px;
    // background-color: red;
    position: relative;
    margin: 0 auto;
    .box_xcxp{
      width: 331px;
      height: 451px;
      position: absolute;
      top: 30px;
      left: 50%;
      -ms-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    .box1{
      width: 100%;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .ka_btn{
    width: 140px;
    height: 35px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    // border: 2px red;
    // background-color: #fff;
    font-size: 16px;
    font-weight: 800;
    border-width: 2px;
    // color: #fe6a00;
    background: none;
    // border-color: #fe6a00;
  }
  // .sub2{}
  .ka_btn:active{
    // background: #fe6a00;
    // border-color: #fe6a00;
    color: #FFF;
  }
  #qrcode1{
    position: absolute;
    top: 149px;
    left: 78px;
    z-index: 1;
  }
  #qrcode2{
    position: absolute;
    top: 149px;
    left: 78px;
    z-index: 1;
  }
  .btnbox{
    width: 100%;
    text-align: center;
    margin-top: 20px;
    .btn{
      padding: 10px 25px;
    }
    .blue{
      background:rgb(95, 13, 226);
      color: #fff;
    }
    
  }
</style>